/*
 * @Author: caozaihui
 * @Date: 2024-09-02 22:06:09
 * @LastEditors: czh 15908754730@163.com
 * @LastEditTime: 2024-11-23 21:01:52
 * @FilePath: \communit-club-front\src\views\brush-questions\index.tsx
 */
import GoodCollectionError from '@components/good-collection-error'
import req from '@utils/request'
import OptionList from './components/optionlist'
import { Fragment, useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import './index.less'

const grade: Record<string, string> = {
  1: '初级',
  2: '中级',
  3: '高级',
  4: '资深',
  5: '专家'
}
const type: Record<string, string> = {
  1: '单选题',
  2: '多选题',
  3: '判断题',
  4: '简答题'
}
const BrushQuestions = () => {

  const { id } = useParams()
  const [question, setQuestion] = useState<Record<string, any>>(null)
  const [index, setIndex] = useState(1)

  useEffect(() => {
    console.log(id)
    if (!id) return
    req({
      method: 'post',
      url: '/querySubjectInfo',
      data: {
        id
      },
    }).then(res => {
        if (res.success && res.data) {
          setQuestion(res.data)
        }
      })
      .catch(err => console.log(err))
  }, [id])
  
  return (
    <div className='brush-questions-box'>
      <div className='question-box'>
        <div className='question'>
          <div className='question-type'>
            <div className='number'>{index}</div>
            <div className='type'>{question ? type[question.subjectType] :"题目"}</div>
          </div>
        </div>
      </div>
      {question ? (
        <Fragment>
          <div className='question-content'>
            <div className='difficulty'>
              {grade[question.subjectDifficult]}-{question?.labelName.join('、')}
            </div>
            <div>{question.subjectName}</div>
          </div>
          <div>
            {question.subjectType !== 4 ? (<OptionList question={question} />) : ('')}
          </div>
          <div className='answer-box'>
            {question.subjectType !== 4 ?
              (<>
                <div className='reference-answer'>解析:</div><div
                  className='answer-content wang-editor-style'
                  dangerouslySetInnerHTML={{
                    __html: question.subjectParse
                  }}
                ></div>
              </>)
              : (<>
                <div className='reference-answer'>参考答案</div>
                <div
                  className='answer-content wang-editor-style'
                  dangerouslySetInnerHTML={{
                    __html: question.subjectAnswer
                  }}
                ></div>
              </>)
            }

            <br />
          </div>
          <div className='change-question-box'>
            <GoodCollectionError detail={question} />
          </div>
        </Fragment>
      ) : null}
    </div>
  )
}

export default BrushQuestions
